<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ include file="/commonjsp/baseUtil.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>后台管理-城市管理</title>
<script type="text/javascript">
	function queryCityArea(cityId){
		$.post(ROOTPATH+"/areaJson/queryAreaByCity.aspx",
				 {cityId:cityId},
				 function(data){
					 //alert(data);
					 //successFunc(data);
					 $("#dialog-form-area-query").html("");
					 if(data.list.length<1){
						 $("#dialog-form-area-query").append("没有区县</br>");
					 }else{
						 for(var i=0;i<data.list.length;i++){
							 $("#dialog-form-area-query").append(data.list[i].name+"&nbsp;&nbsp;"+"</br>");
						 }
					 }
				 }
			 ); 
		$("#dialog-div-area-auery").dialog("open");
	}
	function addCityArea(cityId,cityName){
		$("#addAreaCityId").val(cityId);
		$("#addAreaCityName").val(cityName);
		$("#addAreaAreaName").val("");
		$("#dialog-div-area-add").dialog("open");
	}
	//增加城市方法
	function newCity(id){
		//alert("new city");
		//alert(id);
		$("#dialog-form").dialog("open");
	}
	//删除城市方法
	function delCity(id){
		//$("#dialog-form").dialog("open");
	}
	//更新城市方法
	function updateCity(_id,_cityName,_areaName,_areaNameDesc,_shortName){
		var cityName = $( "#cityName" ),
		cityId = $( "#cityId" ),
		areaName = $( "#areaName" ),
		areaNameDesc = $( "#areaNameDesc" ),
		shortName=$("#shortName");
		cityId.val(_id);
		cityName.val(_cityName);
		areaName.val(_areaName);
		areaNameDesc.val(_areaNameDesc);
		shortName.val(_shortName);
		$("#dialog-form").dialog("open");
	}
	$(function(){
		var cityName = $("#cityName" ),
		cityId = $( "#cityId" ),
		areaName = $( "#areaName" ),
		areaNameDesc = $( "#areaNameDesc" ),
		shortName=$("#shortName"),
		allFields = $( [] ).add( cityName ).add( cityId ).add( areaName ).add(areaNameDesc).add(shortName),
		tips = $( ".validateTips" );
		
		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "" + n + "的长度必须在" +
					min + "和" + max + "之间." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		function successFunc(data){
			if(data=="" || data==0){
				alert("请求失败");
			}else{
				if(data.resultCode!="1"){
					alert("请求失败，请求返回码："+data.resultStr);
				}else{
					alert("请求成功");
					window.location.reload(true);
				}
			}
		}
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"提交": function() {
					//var bValid = true;
					//allFields.removeClass( "ui-state-error" );
					if(cityId.val()=='' || cityId.val()==0){
						//alert(ROOTPATH+"/cityJson/addCity.action");
						$.post(
							 ROOTPATH+"/cityJson/addCity.aspx",
							 {cityName:cityName.val(),areaName:areaName.val(),areaNameDesc:areaNameDesc.val(),shortName:shortName.val()},
							 function(data){
								 //alert(data);
								 successFunc(data);
							 }
						 ); 
					}else{
						$.post(
							 ROOTPATH+"/cityJson/updateCity.aspx",
							 {cityId:cityId.val(),cityName:cityName.val(),areaName:areaName.val(),areaNameDesc:areaNameDesc.val(),shortName:shortName.val()},
							 function(data){
								 //alert(data);
								 successFunc(data);
							 }
						 ); 
					}
					$( this ).dialog( "close" );
				},
				"取消": function() {
					$(this).dialog("close");
				}
			},
			"close": function() {
				allFields.val( "" ).removeClass( "ui-state-error" );
			} 
		});
		//查看城市对应的区县
		$("#dialog-div-area-auery").dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"取消": function() {
					$(this).dialog("close");
				}
			},
			"close": function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
			} 
		});
		$("#dialog-div-area-add").dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				"提交": function() {
					var name = $("#addAreaAreaName").val();
					var cityId = $("#addAreaCityId").val();
					$.post(ROOTPATH+"/areaJson/addArea.aspx",
							 {cityId:cityId,name:name},
							 function(data){
								if(data=="" || data==0){
								 	alert("请求失败");
								}else{
									if(data.resultCode!="1"){
										alert("请求失败，请求返回码："+data.resultStr);
									}else{
										alert("请求成功");
									}
								}
								$("#dialog-div-area-add").dialog("close");
							}
						 ); 
				},
				"取消": function() {
					$(this).dialog("close");
				}
			},
			"close": function() {
				//allFields.val( "" ).removeClass( "ui-state-error" );
			} 
		});
	}); 
</script>
<style type="text/css">
	table{
		width: 100%;
	}
</style>
</head>
<body>
	<div class="demo" style="height: 100%;">
		<table style="height: 100%;">
			<tr>
				<td style="width: 10%;">
					<div style="height: 100%">
						<jsp:include page="/WEB-INF/jsp/admin/left.jsp" flush="true"></jsp:include>
					</div>
				</td>
				<td style="width:90%;">
					<div id="tabs" style="height:100%; width:100%;">
						<a href="${pageContext.request.contextPath}/admin.html">管理首页</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;城市管理&nbsp;&nbsp;&gt;&nbsp;&nbsp;<a href="#" onclick="newCity(${item.id})">新增</a>
						<div id="tabs-1" style="height: 100%; width: 90%;margin-top: 10px;">
							<table border="1" style="border-collapse: collapse;">
								<thead>
									<tr>
										<td>id</td>
										<td>城市名</td>
										<td>区域名称</td>
										<td>区域缩写</td>
										<td>城市名缩写</td>
										<td>操作</td>
									</tr>
								</thead>
								<c:forEach var="item" items="${list}" varStatus="status">
									<tr>
										<td>${item.id}</td>
										<td>${item.cityName}</td>
										<td>${item.areaName}</td>
										<td>${item.areaNameDesc}</td>
										<td>${item.shortName}</td>
										<td>
											<a href="#" onclick="newCity(${item.id});">新增</a>&nbsp;&nbsp;&nbsp;&nbsp;
											<a href="#" onclick="updateCity(${item.id},'${item.cityName}','${item.areaName}','${item.areaNameDesc}','${item.shortName}');">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;
											<a href="#" onclick="queryCityArea(${item.id});"> 查看区县 </a> &nbsp;&nbsp;&nbsp;&nbsp;
											<a href="#" onclick="addCityArea(${item.id},'${item.cityName}');">新增区县</a>
										</td>
									</tr>
								</c:forEach>
							</table>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
	
	<div id="dialog-form" title="新增或者修改城市">
		<p class="validateTips">字段都为必须字段</p>
		<form>
			<fieldset>
				<input type="hidden" name="cityId" id="cityId"/>
				<label for="cityName">城市名称:</label>
				<input type="text" name="cityName" id="cityName" class="text ui-widget-content ui-corner-all" />
				<br/>
				<label for="areaName">区域名称:</label>
				<input type="text" name="areaName" id="areaName" value="" class="text ui-widget-content ui-corner-all" />
				<br/>
				<label for="areaNameDesc">区域描述:</label>
				<input type="text" name="areaNameDesc" id="areaNameDesc" class="text ui-widget-content ui-corner-all" />
				<br/>
				<label for="shortName">城市缩写:</label>
				<input type="text" name="shortName" id="shortName" class="text ui-widget-content ui-corner-all" />
			</fieldset>
		</form>
	</div>
	<div id="dialog-div-area-auery" title="查看区县名">
		<form id="dialog-form-area-query">
			
		</form>
	</div>
	<div id="dialog-div-area-add" title="新增区域">
		<p class="validateTips">字段都为必须字段</p>
		<form>
			<fieldset>
				<input type="hidden" name="addAreaCityId" id="addAreaCityId"/>
				<label for="addAreaCityName">城市名称:</label>
				<input type="text" name="addAreaCityName" id="addAreaCityName" disabled="disabled" class="text ui-widget-content ui-corner-all" />
				<br/>
				<label for="addAreaAreaName">区域名称:</label>
				<input type="text" name="addAreaAreaName" id="addAreaAreaName" value="" class="text ui-widget-content ui-corner-all" />
			</fieldset>
		</form>
	</div>
</body>
</html>